<template>
  <div class="app-container">
    <el-row>
      <div class="chart-title">饼状图</div>
    </el-row>
    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="8">
        <!--<div class="chart-wrapper">
          <ring-chart
            :ring-data="dataAll.devPie1"/>
        </div>-->

      </el-col>
      <el-col :xs="24" :sm="24" :lg="8" >
        <div class="chart-wrapper">
          <ringRadius
            :ring-data="dataAll.devPie2"/>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <ringRadius1
            :ring-data="dataAll.devPie2"/>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <ringRadius2
            :ring-data="dataAll.devPie3"/>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="32"/>
    <el-row>
      <div class="chart-title">柱状图</div>
    </el-row>
    <el-row :gutter="32">
      <!--<el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <BarChart
            :bar-data="dataAll.barData1"/>
        </div>

      </el-col>-->
      <el-col :xs="24" :sm="24" :lg="8" >
        <div class="chart-wrapper">
          <BarGradual
            :bar-data="dataAll.barData2"/>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8" >
        <div class="chart-wrapper">
          <BarLine
            :bar-data="dataAll.barData3"/>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8" >
        <div class="chart-wrapper">
          <BarStyle />
        </div>
      </el-col>
    </el-row>
    <el-row>
      <div class="chart-title">折线图</div>
    </el-row>
    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <LineChart
            :trend-data="dataAll.trendData1"/>
        </div>

      </el-col>
      <el-col :xs="24" :sm="24" :lg="8" >
        <div class="chart-wrapper">
          <LineTrend
            :trend-data="dataAll.trendData2"/>
        </div>
      </el-col>
      <!--<el-col :xs="24" :sm="24" :lg="8" >
        <div class="chart-wrapper">
          <liquiFillChart
            :liquid-fill="dataAll.liquidFill"/>
        </div>
      </el-col>-->

    </el-row>

    <el-row>
      <div class="chart-title">地图</div>
    </el-row>
    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="chart-wrapper">
          <MapChart/>
        </div>

      </el-col>
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="chart-wrapper">
          <MapChart1/>
        </div>

      </el-col>

    </el-row>
  </div>
</template>

<script>

import PieChart from '@/views/charts/PieChart'
import LineChart from '@/views/charts/LineChart'
import LineTrend from '@/views/charts/LineTrend'
import BarChart from '@/views/charts/BarChart'
import RingChart from '@/views/charts/ringChart'
import ringRadius from '@/views/charts/ringRadius'
/* import RingCharts from '@/views/charts/ringChart1'*/

import BarGradual from '@/views/charts/BarGradual'
import BarLine from '@/views/charts/BarLine'
import ringRadius1 from '@/views/charts/ringRadius1'
import ringRadius2 from '@/views/charts/ringRadius3'
import liquiFillChart from '@/views/charts/liquiFillChart'

import BarStyle from '@/views/charts/BarStyle'
import MapChart from '@/views/charts/MapChart'
import MapChart1 from '@/views/charts/MapChart1'
export default {
  components: {
    MapChart,
    PieChart,
    BarChart,
    RingChart,
    LineChart,
    ringRadius,
    BarGradual,
    BarLine,
    ringRadius1,
    LineTrend,
    liquiFillChart,
    ringRadius2,
    BarStyle,
    MapChart1
  },
  filters: { // 局部过滤器

  },
  data() {
    return {
      dataAll: {
        devPie: {},
        devBar: {},
        devTable: [],
        energyAll: {},
        energyArea: {},
        energyType: {},
        likeTrend: {}
      }
    }
  },
  created() {


    this.initChart()
  },
  mounted(){
    console.log("============index=================")
    console.log(this.$el)
  },
  methods: {
    initChart() {
      this.dataAll.devPie1 = {
        title: '普通圆环',
        name: ['测试1', '测试2'],
        data: [12, 34],
        radius: ['40%', '60%']
      }
      this.dataAll.devPie2 = {
        title: '渐变过度圆环',
        name: '渐变过度圆环',
        data: [{ name: '测试1', value: 12 }, { name: '测试2', value: 39 }, { name: '测试3', value: 29 }],
        radius: ['40%', '60%']
      }
      this.dataAll.devPie3 = {
        title: '渐变过度圆环',
        name: '渐变过度圆环',
        data: [{ name: '测试1', value: 12 }, { name: '测试2', value: 39 }, { name: '测试3', value: 29 }],
        radius: ['40%', '60%']
      }

      this.dataAll.barData1 = {
        title: '柱状图',
        name: ['测试1', '测试2'],
        data: [12, 34],
        radius: ['40%', '60%']
      }
      this.dataAll.barData2 = {
        title: '柱状图2',
        name: ['测试1', '测试2'],
        data: [
          {
            name: '测试1',
            value: 220
          },
          {
            name: '测试2',
            value: 182
          },
          {
            name: '测试3',
            value: 191
          },
          {
            name: '测试4',
            value: 234
          }
        ],
        radius: ['40%', '60%']
      }

      this.dataAll.barData3 = {
        title: '柱状图3',
        name: ['测试1', '测试2'],
        data: [
          {
            name: '2020GDP',
            data: [
              { name: '成都市', count: 100, value: 90 },
              { name: '南充市', count: 189, value: 100 },
              { name: '绵阳市', count: 45, value: 2 }
            ]
          },
          {
            name: '2021GDP',
            data: [
              { name: '成都市', count: 89, value: 20 },
              { name: '南充市', count: 400, value: 189 },
              { name: '绵阳市', count: 256, value: 200 }
            ]
          }
        ],
        radius: ['40%', '60%']
      }

      this.dataAll.trendData1 = {
        title: 'GDP',
        data: [500, 23, 45, 343, 34, 342],
        name: ['成都', '南充', '绵阳', '乐山', '眉山']
      }
      this.dataAll.trendData2 = {
        title: '折线2',
        data: [
          {
            title: '成都',
            data: [12, 23, 42, 12, 43, 231, 42]
          },
          {
            title: '南充',
            data: [32, 123, 62, 82, 203, 34, 34]
          }
        ]
      }

      this.dataAll.liquidFill = {}
    }
  }
}

</script>

<style scoped>
  .el-col {

  }

  .app-container {
    background-color: #171c3c;
  }

  .fillcontain {
    width: 100%;
    height: 100%;
    padding: 16px;
    box-sizing: border-box;
  }

  .pagination {
    text-align: right;
    margin-top: 10px;
  }

  .checkbox-style {
    padding-bottom: 20px;
    padding-left: 30px;
    padding-right: 30px;
    width: 100%;
  }

  .chart-wrapper {
    /*background-color: #fff;*/
    margin-bottom: 40px;
    /*padding: 16px 30px;*/
    color: white;
    border-radius: 20px;
    background: linear-gradient(to bottom,#25294f,rgba(37,41,79,0));
  }

  .chart-title {
    width: 100%;
    text-align: center;
    height: 80px;
    line-height: 80px;
    font-size: 24px;
    color: #fff;
    position: relative;
    margin-top: 20px;
    margin-bottom: 10px;
  }

 /* .chart-title::after,
  .chart-title::before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 4px solid #516dd8;
    position: absolute;
  }

  .chart-title::after {
    margin: 30px 0 0 100px;
    left: 50%;
    top: 0;
  }

  .chart-title::before {
    margin: 30px 0 0 -120px;
    left: 50%;
    top: 0;
  }*/

  .box-padding {
    padding: 0 !important;
  }

  .pieError {
    display: block;
    height: 400px;
    line-height: 400px;
    width: 100%;
    text-align: center;
    color: #909399;
  }
  /*/deep/ .el-table__body-wrapper::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: red;
    border-radius: 3px;
  }*/
</style>
<!--<style>
  /*.top-select .el-input__inner {
    line-height: 40px;
    height: 40px;
  }

  .table3-style tr td {
    color: #23d7cc;
  }*/

  /*.table3-style tr td:nth-child(1) {
    color: #fff;
  }

  .table3-style td {
    border-bottom: 1px solid #171c3c;
  }*/

  /*.el-table&#45;&#45;enable-row-hover .el-table__body tr:hover > td {
    background-color: #304270;
    !*border: 5px solid red;*!

  }*/

 /* .table3-style tr:hover {
    background-color: #304270;
    border: 5px solid red;
    !*border-left: 5px solid #23d7cc;*!
  }

  .el-table&#45;&#45;enable-row-hover .el-table__body tr:hover {
    border-left: 5px solid #23d7cc;
    border-right: 5px solid #23d7cc;
  }*/

  /*.has-gutter th {
    color: #fff;
  }*/

  /*.table3-style tbody {
    border-top: 2px solid #fff !important;
  }*/

 /* .el-table th, .el-table tr {
    background-color: rgba(255, 255, 255, 0.1);
    border: none;
  }*/
</style>-->
